<template>
  <j-modal
    ref="modal"
    :width="800"
    :visible="visible"
    switchFullscreen
    :title="title"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @ok="submit"
    @cancel="close"
  >
    <a-form-model :form="form" :model="form" ref="ruleForm" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <!-- <a-form-model-item label="节点顺序" prop="order"> {{ order }} </a-form-model-item> -->
      <a-form-model-item label="节点名称" prop="nodeName" :title="order">
        <a-input placeholder="请输入节点名称" v-model="form.nodeName" :disabled="disableSubmit" />
      </a-form-model-item>
      <a-form-model-item label="审批类型" prop="approvalType">
        <a-radio-group v-model="form.approvalType" :disabled="disableSubmit" style="height: 84px; overflow: hidden;">
          <a-radio :style="radioStyle" :value="1"> 指定人员 <p style="padding-left:28px;">直接选择一人作为审批人</p> </a-radio>
          <a-radio :style="radioStyle" :value="2"> 指定角色 <p style="padding-left:28px;">指定角色作为审批人，这个角色的人都可以作为申批人</p> </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="审核人" :prop="form.approvalType==1?'approverId':'approverRoleScopes'">
        <j-select-user-by-dep v-if="form && Object.keys(form).length>0 && form.approvalType==1" 
          v-model="form.approverId"
          store="id"
          :isDepFiltrate="false"
          :multi="false"
          @rows="getSelectRows"
          :disabled="disableSubmit"
        />
        <a-space v-if="form && Object.keys(form).length>0 && form.approvalType==2">
          <j-dict-select-tag ref="executiveRef" v-model="form.executive" :disabled="disableSubmit" dictCode="executive_level" style="width:160px;" placeholder="请选择行政级别" />
          <j-dict-select-tag ref="departRef" v-model="form.depart" :disabled="disableSubmit" dictCode="org_category_ext" style="width:160px;" placeholder="请选择部门类别" />
          <j-search-select-tag v-model="form.role" :dictOptions="rolesOptions" :disabled="disableSubmit" style="width:160px;" placeholder="请选择角色" />
        </a-space>
      </a-form-model-item>
      <a-form-model-item label="是否可上传附件" prop="uploadFile">
        <!--//1是，0否-->
        <j-dict-select-tag v-model="form.uploadFile" type="radio" dictCode="yn"  :disabled="disableSubmit"/>
      </a-form-model-item>
      <a-form-model-item label="附件是否必须上传" prop="mustUpload" v-if="form && Object.keys(form).length>0 && form.uploadFile==1">
        <!--//1是，0否-->
        <j-dict-select-tag v-model="form.mustUpload" type="radio" dictCode="yn" :disabled="disableSubmit" @change="changeFile" />
      </a-form-model-item>
      <a-form-model-item label="附件格式" prop="fileFormat" v-if="form && Object.keys(form).length>0 && form.uploadFile==1">
        <j-multi-select-tag v-model="form.fileFormat" dictCode="file_format" type="checkbox" :disabled="disableSubmit" />
      </a-form-model-item>
      <a-form-model-item label="附件描述" prop="fileDescribe" v-if="form && Object.keys(form).length>0 && form.uploadFile==1">
        <a-textarea v-model="form.fileDescribe" placeholder="清输入附件描述" :disabled="disableSubmit" :auto-size="{ minRows: 2, maxRows: 5 }" />
      </a-form-model-item>
    </a-form-model>
  </j-modal>
</template>
<script>
import { queryall, getDictItemsFromCache } from '@/api/api'
var approverRoleScopeLists = (rule, value, callback) => {
  console.log(value)
  if (value && value.length >= 3) {
    callback()
  } else {
    callback('请选择审核人')
  }
}
var nodeNameValidator = (rule, value, callback) => {
  if (!value || new RegExp(/^.{2,20}$/).test(value)) {
    callback()
  } else {
    callback('请输入长度为2-20的节点名称')
  }
}
export default {
  props: {
    showFigure: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data() {
    return {
      handleType: 'add', // add添加节点，edit编辑节点
      title: null,
      visible: false,
      disableSubmit: false,
      order: 1,
      form: {},
      executiveOptions: getDictItemsFromCache('executive_level'),
      departOptions: getDictItemsFromCache('org_category_ext'),
      rolesOptions:[],
      radioStyle: {
        display: "block",
        height: "45px",
        lineHeight: "20px"
      },
      rules: {
        nodeName: [
          { required: false, message: "请填写节点名称", trigger: "change" },
          { validator: nodeNameValidator },
        ],
        approverRoleScopes: [
          { required: true, type: 'array',message: "请选择审核人", trigger: "change" },
          { validator: approverRoleScopeLists },
        ],
        approverId: [ { required: true, message: "请选择审核人", trigger: "change" } ],
        mustUpload: [ { required: true, message: "请选择附件是否必须上传", trigger: "change" } ],
        fileFormat: [ { required: true, message: "请选择附件格式", trigger: "change" } ]
      },
      datas: []
    }
  },
  watch: {
    // 指定角色-审批人-行政级别
    'form.executive'(newVal, oldVal){
      if(newVal) {
        if(!this.form.hasOwnProperty('approverRoleScopes')) {
          this.$set(this.form, 'approverRoleScopes', [])
          this.$set(this.form, 'approverRoleScopeNames', [])
          this.$set(this.form.approverRoleScopes, 0, newVal)
          this.$set(this.form.approverRoleScopeNames, 0, this.$options.filters.filterArray(newVal, this.executiveOptions, 'value', 'text'))
        } else {
          this.$set(this.form.approverRoleScopes, 0, newVal)
          this.$set(this.form.approverRoleScopeNames, 0, this.$options.filters.filterArray(newVal, this.executiveOptions, 'value', 'text'))
        }
      }
    },
    // 指定角色-审批人-部门类别
    'form.depart'(newVal, oldVal){
      if(newVal) {
        if(!this.form.hasOwnProperty('approverRoleScopes')) {
          this.$set(this.form, 'approverRoleScopes', [])
          this.$set(this.form, 'approverRoleScopeNames', [])
          this.$set(this.form.approverRoleScopes, 1, newVal)
          this.$set(this.form.approverRoleScopeNames, 1, this.$options.filters.filterArray(newVal, this.departOptions, 'value', 'text'))
        } else {
          this.$set(this.form.approverRoleScopes, 1, newVal)
          this.$set(this.form.approverRoleScopeNames, 1, this.$options.filters.filterArray(newVal, this.departOptions, 'value', 'text'))
        }
      }
    },
    // 指定角色-审批人-角色
    'form.role'(newVal, oldVal){
      if(newVal) {
        if(!this.form.hasOwnProperty('approverRoleScopes')) {
          this.$set(this.form, 'approverRoleScopes', [])
          this.$set(this.form, 'approverRoleScopeNames', [])
          this.$set(this.form.approverRoleScopes, 2, newVal)
          this.$set(this.form.approverRoleScopeNames, 2, this.$options.filters.filterArray(newVal, this.rolesOptions, 'value', 'text'))
        } else {
          this.$set(this.form.approverRoleScopes, 2, newVal)
          this.$set(this.form.approverRoleScopeNames, 2, this.$options.filters.filterArray(newVal, this.rolesOptions, 'value', 'text'))
        }
      }
    },
    // 指定角色-审批人
    'form.approverRoleScopes'(newVal, oldVal){
      if(newVal) {
        let approverRoleScope =
          Object.keys(this.form).length > 0 && this.form.approverRoleScopes && this.form.approverRoleScopes.length > 0
            ? this.form.approverRoleScopes.toString()
            : ''
        let approverRoleScopeName =
          Object.keys(this.form).length > 0 && this.form.approverRoleScopeNames && this.form.approverRoleScopeNames.length > 0
            ? this.form.approverRoleScopeNames.toString()
            : ''
        this.$set(this.form,'approverRoleScope', approverRoleScope)
        this.$set(this.form,'approverRoleScopeName', approverRoleScopeName)
      }
    }
  },
  mounted() {
    this.initRoleList()
  },
  methods: {
    submit(e) {
      let vm = this;
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          vm.$emit("onChildValue", this.handleType, this.form);
          vm.close()
        } else {
          return false;
        }
      });
    },
    add() {
      this.handleType = 'add'
      this.title = '添加节点'
      this.visible = true
      this.$set(this.form, "approvalType", 1) //审批类型，（1-指定人员 2-指定角色），默认为 1:指定人员
      this.$set(this.form, "uploadFile", 0) //是否可上传附件，(0-否 1-是)，默认为 0:否
    },
    edit(record, handleType) {
      this.visible = true
      let form = JSON.parse(JSON.stringify(record))
      this.handleType = handleType?'details': 'edit'
      this.title = handleType?'查看节点':'编辑节点'
      this.disableSubmit = handleType? true: false
      this.form = form
      if(Object.keys(this.form).length>0 && this.form.approverRoleScope) {
        let approverRoleScopeData = this.form.approverRoleScope.split(',')
        this.$set(this.form,'executive', approverRoleScopeData[0])
        this.$set(this.form,'depart', approverRoleScopeData[1])
        this.$set(this.form,'role', approverRoleScopeData[2])
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    // 获取审核人信息
    getSelectRows(rows) {
      console.log(rows)
      // 审批人id
      // let approverIds = rows.map(v => v.id).join(',')
      // this.$set(this.form, "approverId", approverIds)
      //审批人名称
      let approverNames = rows.map(v => v.realname).join(',')
      this.$set(this.form, "approverName", approverNames)
      //部门编号和部门名称
      let orgCode = rows.map(v => v.orgCode).join(',')
      let departName = rows.map(v => v.orgCodeTxt).join(',')
      this.$set(this.form, "orgCode", orgCode)
      this.$set(this.form, "departName", departName)
      // 	审批级别
      this.$set(this.form, "approvalLevel", this.order)
      console.log(this.form)
    },
    // 附件是否必须上传
    changeFile(value) {
      if (value==1) {
        this.rules['fileFormat'].forEach(item => item.required = true)
      } else {
        this.rules['fileFormat'].forEach(item => item.required = false)
      }
    },
    //初始化角色字典
    initRoleList(){
      queryall().then((res)=>{
        if(res.success){
          const { result } = res
          this.rolesOptions = result.map((item,index,arr)=>{
            let c = {text:item.roleName, value:item.id}
            return c;
          })
        }
      })
    }
  }
};
</script>
<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 4px;
}
</style>
